<template>
  <div
    class="applicationcode"
    @click="goback"
  >
    <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="title"
    />
    <div class="wrapper">

      <div v-for="(item,index) in placeList" :key="index" class="card-wrapper" @click="goTo(item)">
        <svg-icon class="card-icon" icon-class="statistics" />
        <div class="card-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      placeList: [
        {
          name: '隔离总人数与新增统计',
          url: '/source/source_1'
        },
        {
          name: '隔离总人数统计',
          url: '/source/source_2'

        },
        {
          name: '隔离统计情况',
          url: '/source/source_3'

        },
        {
          name: '隔离原因',
          url: '/source/source_4'

        },
        {
          name: '隔离人员始发地',
          url: '/source/source_5'

        },
        {
          name: '入境人员统计',
          url: '/source/source_6'

        },
        {
          name: '累计境内外隔离人数',
          url: '/source/source_66'

        },
        {
          name: '今日解除与全部解除隔离人员统计',
          url: '/source/source_666'

        },
        {
          name: '房间统计',
          url: '/source/source_22'

        }
      ],
      title: '全市数据统计',
      type: ''
    }
  },
  mounted() {
    this.$dd.setTitle({ title: '' })
    this.type = this.$route.query.type
  },
  beforeCreate() {
    this.$dd.hideTitleBar()
  },
  methods: {
    goTo(arg) {
      if (this.type) {
        this.$router.push({ path: arg.url, query: { type: this.type, name: arg.name }})
      } else {
        this.$router.push({ path: arg.url, query: { name: arg.name }})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.applicationcode{
  width:100%;
  height:100%;
}
.wrapper{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 28px;
  padding-right: 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  align-content: flex-start;
  .card-wrapper{
    background: #FFFFFF;
    box-shadow: 0px 6px 12px 2px rgba(39,138,210,0.15);
    border-radius: 16px 16px 16px 16px;
    box-sizing: border-box;
    padding: 46px 34px 30px;
    width: 212px;
    height: 222px;
    text-align: center;
    margin-bottom: 28px;
    margin-right: 28px;
    .card-icon{
      font-size: 54px;
      margin-bottom: 26px;
    }
    .card-name{
      width: 100%;
      height: 92px;
      text-align: center;
      font-size: 24px;
      line-height: 32px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #232323;
    }
  }

}
</style>
